import React, { useEffect, useState } from 'react'
import { Tooltip, Button, Collapse, Form, Input, Cascader, DatePicker, Upload, Space, Row, Col, Tag } from "antd"
import { CaretRightOutlined, DeleteOutlined, InfoCircleOutlined, CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { request } from 'umi';
import "./index.less"
const { CheckableTag } = Tag;
export default function index(props: any) {
    const [selectedTags, setSelectedTags] = useState<string[]>([]);
    const [selectedTagsList, setSelectedTagsList] = useState<string[]>([]);
    const { Panel } = Collapse;
    const { TextArea } = Input;
    const { RangePicker } = DatePicker;
    const [key, setKey] = useState("")
    const [flag, setFlag] = useState({
        one: false,
        tow: false,
        three: false,
        four: false,
        five: false
    })
    const list = [
        { title: "姓名", key: "1", isFlag: false },
        { title: "性别", key: "2", isFlag: false },
        { title: "图片", key: "3", isFlag: false },
        { title: "手机号", key: "4", isFlag: false },
        { title: "生日", key: "5", isFlag: false },
        { title: "QQ号", key: "6", isFlag: false },
        { title: "邮箱", key: "7", isFlag: false },
        { title: "学院", key: "8", isFlag: false },
        { title: "年级", key: "9", isFlag: false },
        { title: "班级", key: "10", isFlag: false },
        { title: "学号", key: "11", isFlag: false },
        { title: "特长", key: "12", isFlag: false },
        { title: "备注", key: "13", isFlag: false },
    ]
    const data = [
        { title: "报名", key: "1", flag: false },
        { title: "投票", key: "2", flag: false },
        { title: "门票", key: "3", flag: false },
        { title: "签到", key: "4", flag: false },
        { title: "抽奖", key: "5", flag: false },
    ]
    const options = [
        { label: "只可投一次", value: "1" },
        { label: "每日都可投", value: "2" },
    ]
    const handleChange = (n: string, checked: boolean) => {
        console.log(n, "n", checked, "checked")
        const nextSelectedTags = checked ? [...selectedTags, n] : selectedTags.filter(t => t !== n);
        setSelectedTags(nextSelectedTags);
        setKey(n)
        if (n == "1") {
            setFlag({
                ...flag,
                one: !flag.one
            })
        } else if (n == "2") {
            setFlag({
                ...flag,
                tow: !flag.tow
            })
        } else if (n == "3") {
            setFlag({
                ...flag,
                three: !flag.three
            })
        } else if (n == "4") {
            setFlag({
                ...flag,
                four: !flag.four
            })
        } else if (n == "5") {
            setFlag({
                ...flag,
                five: !flag.five
            })
        }
        props.getTagName(selectedTags)
    };

    const handleChangeList = (n: string, checked: boolean) => {
        const nextSelectedTags = checked ? [...selectedTagsList, n] : selectedTagsList.filter(t => t !== n);
        setSelectedTagsList(nextSelectedTags);
    }
    const normFileActiveIMG = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        e.fileList = e.fileList.slice(-1);
        return e?.fileList;
    }
    useEffect(() => {
        props.getTag(selectedTagsList)
        props.getTagName(selectedTags)
    }, [selectedTags, selectedTagsList])
    useEffect(() => {
        if (props.titles == "edit") {
            if (props.showPanel.indexOf("1") > -1) {
                flag.one = true
            }
            if (props.showPanel.indexOf("2") > -1) {
                flag.tow = true
            }
            if (props.showPanel.indexOf("3") > -1) {
                flag.three = true
            }
            if (props.showPanel.indexOf("4") > -1) {
                flag.four = true
            }
            if (props.showPanel.indexOf("5") > -1) {
                flag.five = true
            }
            setSelectedTagsList(props.showTar)
            setSelectedTags(props.showPanel)
        }
    }, [])
    return (
        <div className='activemessg'>
            <div className='activemessg-Item'>
                <h1>选择你要创建的活动<span>(可多选)</span></h1>
                <div className='activemessg-Item-btn'>
                    {/* {data.map((item: any, index) => (
                        <Tooltip title={item.title} key={item.key}>
                            <Button
                                className='on'
                                style={{ borderRadius: "5px", marginLeft: "20px", width: "100px", position: 'relative' }}
                                type='primary'
                                onClick={() => { btnKey(item.key, index) }}
                            >{item.title} {
                                    false && <CloseCircleOutlined style={{
                                        position: "absolute",
                                        top: "1px",
                                        right: "1px"
                                    }} />
                                }</Button>

                        </Tooltip>
                    ))} */}
                    {
                        data.map(tag => (
                            <CheckableTag
                                className='btn'
                                key={tag.key}
                                checked={selectedTags.indexOf(tag.key) > -1}
                                onChange={checked => handleChange(tag.key, checked)}
                            >
                                {tag.title}
                            </CheckableTag>
                        ))
                    }
                </div>
            </div>
            <div className='activemessg-Item-Panel'>
                <Collapse
                    bordered={false}
                    defaultActiveKey={props.showPanel}
                    expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
                    className="site-collapse-custom-collapse"
                >
                    {/* flag.one &&  */}
                    {flag.one && <Panel header="报名" key="1" className="site-collapse-custom-panel">
                        <Form form={props.BMform} layout={'vertical'}>
                            <h1> <span></span> 基本信息</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="活动时间"
                                        name="activeTime"
                                        rules={[{ required: true, message: 'Please input your activeTime!' }]}
                                        style={{ width: "400px" }}>
                                        <RangePicker style={{ width: "100%" }} />
                                    </Form.Item>
                                </Col>
                                <Col className="gutter-row" span={8} offset={1}>
                                    <Form.Item
                                        label="报名人数"
                                        name="numberLimit"
                                    >
                                        <Input
                                            style={{ borderRadius: "5px", width: "400px" }}
                                            placeholder='不填即无限制'
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <h1> <span></span> 选择您希望活动参加者填写的信息</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <div className='btnList'>
                                        {/* {list.map((ele: any) => (
                                            <Button key={ele.key}>{ele.title}</Button>
                                        ))} */}
                                        <Form.Item name="selectedTagsList">
                                            {
                                                list.map(tag => (
                                                    <CheckableTag
                                                        className='btn'
                                                        key={tag.title}
                                                        checked={selectedTagsList.indexOf(tag.title) > -1}
                                                        onChange={checked => handleChangeList(tag.title, checked)}
                                                    >
                                                        {tag.title}
                                                    </CheckableTag>
                                                ))
                                            }
                                        </Form.Item>
                                    </div>

                                </Col>
                            </Row>
                            <h1> <span className='icon'></span> 请编辑活动日程规划 <i>(可添加多选)</i> </h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.List name="users">
                                        {(fields, { add, remove }) => (
                                            <>
                                                {fields.map(({ key, name, ...restField }) => (
                                                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                                        <Form.Item
                                                            {...restField}
                                                            name={[name, 'first']}
                                                            rules={[{ required: true, message: 'Missing first name' }]}
                                                        >
                                                            <Input placeholder="Last Name" />
                                                        </Form.Item>
                                                        {/* <Form.Item
                                                            {...restField}
                                                            name={[name, 'last']}
                                                            rules={[{ required: true, message: 'Missing last name' }]}
                                                        >

                                                            <DatePicker />
                                                        </Form.Item> */}
                                                        <DeleteOutlined
                                                            onClick={() => remove(name)}
                                                            style={{
                                                                color: "red",
                                                                cursor: "pointer"
                                                            }}
                                                        />
                                                    </Space>
                                                ))}
                                                <Form.Item>
                                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                                        Add field
                                                    </Button>
                                                </Form.Item>
                                            </>
                                        )}
                                    </Form.List>
                                </Col>
                            </Row>
                        </Form>
                    </Panel>}
                    {/* flag.tow && */}
                    {flag.tow && <Panel header="投票" key="2" className="site-collapse-custom-panel" >
                        <Form form={props.TPform} layout={'vertical'}>
                            <h1> <span></span> 基本信息</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="活动时间"
                                        name="activeTime"
                                        rules={[{ required: true, message: 'Please input your activeTime!' }]}
                                        style={{ width: "400px" }}>
                                        <RangePicker style={{ width: "100%" }} />
                                    </Form.Item>
                                </Col>
                                <Col className="gutter-row" span={8} offset={1}>
                                    <Form.Item
                                        label="投票方式" name="selectAddress"
                                        rules={[{
                                            required: true,
                                            message: 'Please input your selectAddress!'
                                        }]}>
                                        <Cascader style={{ borderRadius: "10px", width: "400px" }} options={options}
                                            placeholder="只可投一次" />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Form.List name="users">
                                {(fields, { add, remove }) => (
                                    <>
                                        {fields.map(({ key, name, ...restField }) => (
                                            <div key={key} >
                                                <h1> <span></span> 投票对象</h1>
                                                <Row gutter={16}>
                                                    <Col span={8} offset={1} className="gutter-row">
                                                        <Form.Item
                                                            {...restField}
                                                            name={[name, 'first']}
                                                            label="名称"
                                                            rules={[{
                                                                required: true,
                                                                message: 'Please input your Name!'
                                                            }]}
                                                        >
                                                            <Input style={{ borderRadius: "5px", width: "400px" }} placeholder='请输入投票对象的名称'
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                    <Col className="gutter-row" span={8} offset={1}>
                                                        <Form.Item
                                                            {...restField}
                                                            label="说明"
                                                            name={[name, 'last']}
                                                            rules={[{
                                                                required: true,
                                                                message: 'Please input your selectAddress!'
                                                            }]}
                                                        >
                                                            <Input style={{ borderRadius: "5px", width: "400px" }} placeholder='请输入投票对象的说明'
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                </Row>
                                                <Row gutter={16}>
                                                    <Col className="gutter-row" span={8} offset={1}>
                                                        <Form.Item
                                                            style={{ width: "100px" }}
                                                            {...restField}
                                                            name={[name, 'three']}
                                                            valuePropName="fileList"
                                                            getValueFromEvent={normFileActiveIMG}
                                                            label="图片"
                                                            rules={[{
                                                                required: true,
                                                                message: 'Please input your selectAddress!'
                                                            }]}
                                                            extra={<>
                                                                <InfoCircleOutlined style={{ color: "orange" }} /> <span style={{ color: "#ccc", marginLeft: "5px" }}>支持扩展名：jpg、jpeg、png</span>
                                                            </>}
                                                        >
                                                            <Upload
                                                                style={{ width: "100%" }}
                                                                listType="picture-card"
                                                                name='multipartFile'
                                                                action='/campus/campusweb/upload/pictureUpload'
                                                            >
                                                                <div>
                                                                    <p style={{ fontSize: "20px" }}>+</p>
                                                                    <p>添加图片</p>
                                                                </div>
                                                            </Upload>
                                                        </Form.Item>
                                                        <DeleteOutlined
                                                            onClick={() => remove(name)}
                                                            style={{
                                                                color: "red",
                                                                cursor: "pointer"
                                                            }}
                                                        />
                                                    </Col>
                                                </Row>
                                            </div>
                                        ))}
                                        <Form.Item>
                                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                                Add field
                                            </Button>
                                        </Form.Item>
                                    </>
                                )}
                            </Form.List>
                        </Form>
                    </Panel>}
                    {/* flag.three && */}
                    {flag.three && <Panel header="门票" key="3" className="site-collapse-custom-panel">
                        <Form>
                            <h1> <span></span> 基本信息</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="活动时间"
                                        name="activeName"
                                        rules={[{ required: true, message: 'Please input your activeName!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Space style={{ width: "400px" }} direction="vertical" size={12}>
                                            <RangePicker style={{ width: "100%" }} />
                                        </Space>
                                    </Form.Item>
                                </Col>
                                <Col className="gutter-row" span={8} offset={1}>
                                    <Form.Item
                                        label="门票数量"
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Input
                                            style={{ borderRadius: "5px", width: "400px" }}
                                            placeholder='不填即无限制'
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <h1> <span></span> 选择您希望活动参加者填写的信息</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <div className='btnList'>
                                        {list.map((ele: any) => (
                                            <Button key={ele.key}>{ele.title}</Button>
                                        ))}
                                    </div>
                                </Col>
                            </Row>
                            <h1> <span className='icon'></span> 请编辑活动日程规划 <i>(可添加多选)</i> </h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.List name="users">
                                        {(fields, { add, remove }) => (
                                            <>
                                                {fields.map(({ key, name, ...restField }) => (
                                                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                                        <Form.Item
                                                            {...restField}
                                                            name={[name, 'first']}
                                                            rules={[{ required: true, message: 'Missing first name' }]}
                                                        >
                                                            <Input placeholder="Last Name" />
                                                        </Form.Item>
                                                        <Form.Item
                                                            {...restField}
                                                            name={[name, 'last']}
                                                            rules={[{ required: true, message: 'Missing last name' }]}
                                                        >

                                                            <DatePicker />
                                                        </Form.Item>
                                                        <DeleteOutlined
                                                            onClick={() => remove(name)}
                                                            style={{
                                                                color: "red",
                                                                cursor: "pointer"
                                                            }}
                                                        />
                                                    </Space>
                                                ))}
                                                <Form.Item>
                                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                                        Add field
                                                    </Button>
                                                </Form.Item>
                                            </>
                                        )}
                                    </Form.List>
                                </Col>
                            </Row>

                        </Form>
                    </Panel>}
                    {/* flag.four && */}
                    {flag.four && <Panel header="签到" key="4" className="site-collapse-custom-panel">
                        <Form>
                            <h1> <span></span> 基本信息</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="活动时间"
                                        name="activeName"
                                        rules={[{ required: true, message: 'Please input your activeName!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Space style={{ width: "400px" }} direction="vertical" size={12}>
                                            <RangePicker style={{ width: "100%" }} />
                                        </Space>
                                    </Form.Item>
                                </Col>
                                <Col className="gutter-row" span={8} offset={1}>
                                    <Form.Item
                                        label="签到方式"
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Cascader
                                            style={{ borderRadius: "10px", width: "400px" }}
                                            options={options}
                                            placeholder="只可投一次" />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Form>
                    </Panel>}
                    {/* flag.five &&  */}
                    {flag.five && <Panel header="抽奖" key="5" className="site-collapse-custom-panel">
                        <Form>
                            <h1> <span></span> 基本信息</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="活动名称"
                                        name="activeName"
                                        rules={[{ required: true, message: 'Please input your activeName!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Space style={{ width: "400px" }} direction="vertical" size={12}>
                                            <RangePicker style={{ width: "100%" }} />
                                        </Space>
                                    </Form.Item>
                                </Col>
                                <Col className="gutter-row" span={8} offset={1}>
                                    <Form.Item
                                        label="每人抽奖次数"
                                        name="selectAddress"
                                        rules={[{ required: true, message: 'Please input your selectAddress!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Input
                                            style={{ borderRadius: "5px", width: "400px" }}
                                            placeholder="请输入1~9999999的整数"
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="兑奖规则"
                                        name="selectAddress"
                                        rules={[{ required: true, message: 'Please input your selectAddress!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <TextArea
                                            rows={2}
                                            style={{ width: "400px", borderRadius: "5px" }}
                                            placeholder="请输入兑奖规则"
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <h1> <span></span> 奖品设置(未中奖)</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <p>奖品总数：无限制</p>
                                </Col>
                            </Row>
                            <h1> <span></span> 奖品设置(一等奖)</h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="奖品名称"
                                        name="activeName"
                                        rules={[{ required: true, message: 'Please input your activeName!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Input
                                            style={{ borderRadius: "5px", width: "400px" }}
                                            placeholder='请输入奖品名称'
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="奖品总数"
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Input
                                            style={{ borderRadius: "5px", width: "400px" }}
                                            placeholder='请输入奖品总数'
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="中奖率(%)"
                                        name="activeName"
                                        rules={[{ required: true, message: 'Please input your activeName!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <Input
                                            style={{ borderRadius: "5px", width: "400px" }}
                                            placeholder='请输入中奖率'
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.Item
                                        label="图片"
                                        name="activeName"
                                        rules={[{ required: true, message: 'Please input your activeName!' }]}
                                    >
                                    </Form.Item>
                                    <Form.Item>
                                        <div style={{ width: "100px" }}>
                                            <Upload style={{ width: "100%" }}
                                                action='/campus/campusweb/upload/pictureUpload'
                                                listType="picture-card"
                                                name='multipartFile'
                                            >
                                                <div>
                                                    <p style={{ fontSize: "20px" }}>+</p>
                                                    <p>添加图片</p>
                                                </div>
                                            </Upload>
                                        </div>
                                        <div>
                                            <InfoCircleOutlined style={{ color: "orange" }} /> <span style={{ color: "#ccc", marginLeft: "5px" }}>支持扩展名：jpg、jpeg、png</span>
                                        </div>
                                    </Form.Item>
                                </Col>

                            </Row>
                            <h1> <span className='icon'></span> 请编辑活动日程规划 <i>(可添加多选)</i> </h1>
                            <Row gutter={16}>
                                <Col span={8} offset={1} className="gutter-row">
                                    <Form.List name="users">
                                        {(fields, { add, remove }) => (
                                            <>
                                                {fields.map(({ key, name, ...restField }) => (
                                                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                                        <Form.Item
                                                            {...restField}
                                                            name={[name, 'first']}
                                                            rules={[{ required: true, message: 'Missing first name' }]}
                                                        >
                                                            <Input placeholder="Last Name" />
                                                        </Form.Item>
                                                        <Form.Item
                                                            {...restField}
                                                            name={[name, 'last']}
                                                            rules={[{ required: true, message: 'Missing last name' }]}
                                                        >

                                                            <DatePicker />
                                                        </Form.Item>
                                                        <DeleteOutlined
                                                            onClick={() => remove(name)}
                                                            style={{
                                                                color: "red",
                                                                cursor: "pointer"
                                                            }}
                                                        />
                                                    </Space>
                                                ))}
                                                <Form.Item>
                                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                                        Add field
                                                    </Button>
                                                </Form.Item>
                                            </>
                                        )}
                                    </Form.List>
                                </Col>
                            </Row>
                        </Form>
                    </Panel>}
                </Collapse>
            </div>
        </div>
    )
}
